<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>JSX的注意</title>
    <!--引入react的核心库-->
    <script src="../script/react.development.js"></script>
    <!--引入react的DOM库-->
    <script src="../script/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="../script/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        /**
         * { } 里面只能写表达式（有值），而不能放语句
         * 但是在语句中能操作jsx
         * 
        */
        const data = ['渲染1', '渲染2', '渲染3']
        const ul = data.map(item => {
            return <div>{item}</div>
        })

        const root = ReactDOM.createRoot(document.getElementById('root'))


        root.render(ul)
        root.render()

    </script>
</body>

</html>